@use '@scss/common.scss' as *;

$curve: cubic-bezier(0.165, 0.84, 0.44, 1);

.codeWrap {
  min-height: 24rem;
  display: flex;
  align-items: center;
  overflow-x: auto;
  background-color: var(--theme-elevation-100);
}

.disableMinHeight {
  min-height: 0;
}

.code {
  width: 100%;
  min-width: fit-content;
  -webkit-text-size-adjust: 100%;
  padding: 1.5rem 2rem 1.5rem 1.5rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-base-100);
  font-family: var(--font-geist-mono), Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  position: relative;

  @include dark-custom-scrollbar;

  :global {
    .token.comment,
    .token.prolog,
    .token.doctype,
    .token.cdata,
    .token.punctuation {
      color: var(--color-base-500);
    }

    .token.plain,
    .token.atrule,
    .token.attr-value,
    .token.keyword {
      color: var(--color-success-250);
    }

    .token.tag,
    .token.boolean,
    .token.number,
    .token.constant,
    .token.symbol,
    .token.deleted {
      color: var(--color-error-500);
    }

    .token.attr-name,
    .token.char,
    .token.builtin,
    .token.inserted {
      color: var(--color-base-100);
    }

    .token.operator,
    .token.entity,
    .token.url,
    .language-css .token.string,
    .style .token.string {
      color: var(--color-base-500);
    }

    .token.selector,
    .token-property,
    .token.function {
      color: var(--color-success-500);
    }

    .token.regex,
    .token.important,
    .token.variable,
    .token.string,
    .token.class-name {
      color: var(--color-warning-500);
    }

    .token.important,
    .token.bold {
      font-weight: bold;
    }

    .token.italic {
      font-style: italic;
    }

    .token.entity {
      cursor: help;
    }

    .token-line {
      display: block;
      text-wrap: nowrap;
    }

    .token-line:not(:last-child) {
      height: initial;
      min-height: 1rem;
    }
  }

  @include large-break {
    font-size: 13px;
  }

  @include mid-break {
    padding: 1rem;
    font-size: 13px;

    .highlight {
      &:before {
        right: calc(var(--gutter-h) * -1);
        left: calc(var(--gutter-h) * -1);
      }
    }
  }
}

.highlight {
  position: relative;

  > * {
    position: relative;
    z-index: 2;
  }

  .lineNumber {
    color: var(--color-base-200);
  }

  &::before {
    content: ' ';
    z-index: 1;
    background-color: var(--color-base-800);
    position: absolute;
    top: -1px;
    right: -2px;
    bottom: 0;
    left: -2px;
    border-radius: 4px;
  }

  & + .highlight::before {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  &:has(+ .highlight)::before {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.lineCodeWrapper {
  position: relative;
  display: inline-block;

  span {
    text-wrap: nowrap;
  }
}

.lineNumber {
  user-select: none;
  display: inline-block;
  text-align: right;
  color: var(--theme-elevation-400);
  padding-right: 1.5rem;
  width: 2.5rem;

  @include mid-break {
    display: none;
  }
}

.line {
  display: block;
  position: relative;
}
